<template>
    <div class="body">
        <div class="container">
            <div class="cart-container">
                <div class="cart-wrapper">
                    <div class="cart-goods-list">
                        <h3>商品列表</h3>
                        <div class="list-body">
                            <list-item v-for="(item,index) in tradeList" :key="item.goodsId" :goodInfo="item"></list-item>
                        </div>
                    </div>

                    <div class="count-detail clearfix">
                        <div class="section-bill">
                            <div class="bill-item">
                                <div class="bill-name">商品件数：</div>
                                <div class="bill-money">{{totalNums}}件</div>
                            </div>
                            <div class="bill-item">
                                <div class="bill-name">商品优惠：</div>
                                <div class="bill-money">0.00元</div>
                            </div>
                            <div class="bill-item total-price">
                                <div class="bill-name">应付总额：</div>
                                <div class="bill-money">
                                    <span class="big-nums">{{ Number(totalPrice).toFixed(2) }}</span>
                                    <a>元</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="cart-bar clearfix">
                        <div class="section-right">
                            <router-link to="/shopcart" class="back-shopcart">返回购物车</router-link>
                            <!-- <a class="back-shopcart">返回购物车</a> -->
                            <a @click="goPay" class="go-primary">去结算</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import ListItem from "@/pages/Trade/ListItem";
export default {
    data() {
        return {
            searchParams: {
                pageNo: 1,
                pageSize: 10000,
            },
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            try {
                await this.$store.dispatch(
                    "shopcart/getShopCart",
                    this.searchParams
                );
            } catch (error) {
                this.$message({
                    message: error,
                    type: "error",
                });
            }
        },
        goPay(){
            this.$router.replace({
                path:"/pay"
            })
        }
    },
    computed: {
        ...mapGetters("shopcart", ["tradeList"]),
        ...mapState("shopcart", ["totalPrice"]),

        totalNums() {
            let initValue = 0;
            return this.tradeList.reduce((preViousValue, currentValue) => {
                return preViousValue + currentValue.number;
            }, initValue);
        },
    },
    components: {
        ListItem,
    },
};
</script>

<style lang="less" scoped>
.body {
    width: 100%;
    padding: 38px 0 160px;
    box-sizing: border-box;
    min-height: 100vh;

    a {
        text-decoration: none;
    }
    .container {
        width: 1200px;
        margin: 0 auto;

        .cart-container {
            .cart-wrapper {
                background-color: white;
                padding-top: 48px;
                .cart-goods-list {
                    padding: 0 24px;
                    h3 {
                        font-size: 18px;
                    }
                    .list-body {
                        border-bottom: 1px solid rgb(224, 224, 224);

                        .list-item {
                            .item-box {
                                padding: 15px 0;
                                .col {
                                    line-height: 80px;
                                    height: 80px;
                                    font-size: 16px;
                                }

                                .col-name {
                                    font-size: 14px;
                                }

                                .col-total {
                                    color: #ff6700;
                                }
                            }
                        }
                    }

                    .col {
                        white-space: nowrap;
                        color: #424242;
                        float: left;
                    }

                    .col-img {
                        img {
                            width: 40px;
                            height: 40px;
                            vertical-align: middle;
                        }
                    }
                    .col-name {
                        width: 600px;
                        padding-left: 10px;
                    }

                    .col-price {
                        width: 360px;
                        text-align: center;
                    }

                    .col-total {
                        width: 120px;
                        text-align: center;
                    }
                }

                .count-detail {
                    padding: 20px 48px;

                    .section-bill {
                        float: right;

                        .bill-item {
                            div {
                                float: left;
                                height: 28px;
                                line-height: 28px;
                                text-align: right;
                                font-size: 14px;
                                white-space: nowrap;
                            }
                            .bill-name {
                                width: 126px;
                                color: #757575;
                            }

                            .bill-money {
                                width: 105px;
                                color: #ff6700;
                            }
                        }

                        .total-price {
                            height: 40px;
                            font-size: 14px;
                            div {
                                margin-top: 12px;
                                height: 28px;
                                line-height: 28px;
                                text-align: right;
                                white-space: nowrap;
                            }

                            .bill-money {
                                margin-top: 0;
                                height: 40px;
                                .big-nums {
                                    font-size: 30px;
                                    height: 40px;
                                    line-height: 40px;
                                    text-align: right;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                }

                .cart-bar {
                    border-top: 2px solid rgb(224, 224, 224);
                    background-color: white;
                    padding: 20px 48px;
                    height: 40px;
                    line-height: 40px;

                    .section-right {
                        float: right;
                        white-space: nowrap;
                        a {
                            float: left;
                            height: 38px;
                            width: 158px;
                            margin-left: 50px;
                            font-size: 18px;
                            text-align: center;
                            transition: all 0.3s;
                        }
                        .go-primary {
                            color: white;
                            background-color: rgb(255, 103, 0);
                            border: 1px solid rgb(255, 103, 0);
                            cursor: pointer;
                            user-select: none;
                        }

                        .back-shopcart {
                            color: #b0b0b0;
                            border: 1px solid #b0b0b0;
                        }

                        .go-primary:hover {
                            background-color: rgb(242, 88, 7);
                        }
                    }
                }
            }
        }
    }
}
</style>